// const { default: axios } = require("axios");

// 商品分类显示与隐藏函数
function goodsSortShow(){
    let mainNavData = document.getElementsByClassName('mainNavData')[0]
    mainNavData.style.opacity = '1'
    mainNavData.style.height = '430px'

}
function goodsSortHidden(){
    let mainNavData = document.getElementsByClassName('mainNavData')[0]
    mainNavData.style.opacity = '0';
    mainNavData.style.height = '0'
}
    
//搜索框店铺与宝贝互换
function change(){
    let sort=document.querySelectorAll('.sort')
    sort[1].addEventListener('click',function(){
        [sort[0].innerHTML,sort[1].innerHTML]=[sort[1].innerHTML,sort[0].innerHTML]
    })
}
change()

// 侧边栏账户显示与隐藏函数
function accountShowFun(){
    let accountHover = document.getElementsByClassName('accountHover')[0];
    accountHover.style.right = '28px'
}
function accountHiddenFun(){
    let accountHover = document.getElementsByClassName('accountHover')[0];
    accountHover.style.right = '-274px'
}

// 返回顶部
function backToTopFun(){
    var backTop=setInterval(function(){
        let topDistance=document.documentElement.scrollTop||document.body.scrollTop;
        if(topDistance>0){
            document.documentElement.scrollTop=document.body.scroll=topDistance-30;
        }else{
            clearInterval(backTop);
        }
    })
}

//轮播图
function Carousel(){
    let carouselScreen = document.getElementById('carouselScreen')
    let virtualBack =document.querySelectorAll('.virtualBack')
    let image = document.querySelectorAll('.image')
    let select = document.getElementsByClassName('select')[0]
    let dot = document.getElementsByClassName('dot')
    let left = document.querySelectorAll('.left')
    let right = document.querySelectorAll('.right')
    //设置数组，里边放图片地址
    // var picture = ['/static/home/image/cloth5.jpg','/static/home/image/cloth8.jpg','/static/home/image/cloth9.jpg','/static/home/image/cloth6.jpg','/static/home/image/cloth1.jpg']
    var picture = []
    axios({
        url:'/home/index/findAllHead',
        method:'GET'
    })
    .then(data => {
        // console.log(data);
        // console.log(data.data.data[0].length);
        for(let i = 0; i<data.data.data[0].length; i++){
            picture.push(data.data.data[0][i].head)
        }
        // console.log(picture.length);
        //设置index,这个变量后面就一直充当图片数组的下标
        let index = 0


        image[0].src = picture[index]
        virtualBack[0].style.cssText = `background-image: url(${picture[index]})`


        //从图片数组的长度，动态添加小圆点
        for( let i =0; i< picture.length; i++){
            let spot = document.createElement('div')
            spot.classList.add('dot')
            select.appendChild(spot)
            //添加自定义属性index，对应每张图片下标
            // dot.bianhao = i;
        }
        //封装函数，清除所有小圆点的check样式
        function clearCheck(){
            for(let i = 0;i<dot.length; i++){
                dot[i].classList.remove('check')
            }
        }
        //封装函数，切到下一张图片
        function goNextImg(){
            //到下一张图片，index加一
            index = index + 1
            if(index == picture.length){
                index = 0
            }
            //显示图片，显示目前index那一张
            image[0].src = picture[index]
            //换虚化背景
            virtualBack[0].style.cssText = `background-image: url(${picture[index]})`
            //小圆点的显示
            clearCheck()
            //显示哪张图就显示对应的小圆点
            dot[index].classList.add('check')
            //若index超过，回到-1
            if(index == picture.length-1){
                index = -1;
            }
        }

        //点击向右按钮时的操作(直接调用切图函数即可)
        right[0].addEventListener('click', function(){
            goNextImg()
        })
        //点击向左按钮时的操作
        left[0].addEventListener('click', function(){
            index = index -1
            if(index == -1){
                index = picture.length -1
            }
            image[0].src = picture[index]
            virtualBack[0].style.cssText = `background-image: url(${picture[index]})`
            // 向左时小圆点的显示
            clearCheck()
            dot[index].classList.add('check')
        })
        //鼠标移入轮播图时，停止轮播
        carouselScreen.addEventListener('mouseover', function() {
            clearInterval(lunbo)
            image[0].classList.remove('become')
        })
        //鼠标移出，开始轮播
        carouselScreen.addEventListener('mouseout', function(){
            lunbo = setInterval(goNextImg, 5000)
            image[0].classList.add('become')
            image[0].style.animationDelay = '5s'
        })

        //点击小圆点时的切图操作
        for(let i = 0; i<picture.length; i++){
            dot[i].addEventListener('click', function(){
                clearCheck()
                this.classList.add('check')
                index = i
                image[0].src = picture[index]
                virtualBack[0].style.cssText = `background-image: url(${picture[index]})`

            })
        }
        //自动轮播图定时器与初始状态
        lunbo = setInterval(goNextImg, 5000)
        image[0].classList.add('become')
        dot[0].classList.add('check')
            })

    .catch(err => {
        console.log(err);
    })
    
}
Carousel()

// let arr=[]
// //轮播图函数
// function CarouselFn(){
//     axios({
//         url:'/home/index/findAllHead',
//         method:'GET'
//     })
//     .then(data => {
//         console.log(data);
//         console.log(data.data.data.length);
//         for(let i = 0; i<data.data.data.length; i++){
//             arr.push(data.data.data[i].head)
//         }
//         console.log(arr);
//     })
//     .catch(err => {
//         console.log(err);
//     })
// }
// CarouselFn()  


